<!--
 *
 * @Date: 2022-06-14 13:11:05
 * @LastEditTime: 2022-06-19 21:29:33

-->

<div>
  <Navbar [icon]="icon" (onLeftClick)="onLeftClick()">
    返回
  </Navbar>

  <ng-template #icon>
    <Icon [type]="'left'"></Icon>
  </ng-template>
  <Card [full]="true">
    <CardHeader [title]="title" [extra]="extra"
      [thumb]="headImg">
      <ng-template #headImg>
        <img src="{{postDetail.pictureUrl}}" class="headImg" alt="头像">
      </ng-template>
      <ng-template #title>
        <div class="flex flex-col flex-1">
          <span class="flex-1 block text-gray-500 ">{{postDetail.userName}}</span>

        </div>
      </ng-template>
      <ng-template #extra>
        <div class="flex items-center justify-center">
          <span>关键词:</span>
          <span class="text-blue-400">{{postDetail.keyWord}}</span>
        </div>
      </ng-template>
    </CardHeader>
    <CardBody>
      <div class="flex">
        <span class="flex-1 text-xl font-medium">{{postDetail.title}}</span>
        <span>{{postDetail.postType}}</span>
      </div>
      <div class=" mt-4">
        <span class="text-gray-500">食品描述：</span>
        <p>{{postDetail.foodDescription}}</p>
      </div>
      <div class=" mt-3">
        <span class="text-gray-500">校外地点：</span>
        <p>{{postDetail.outAddress}}</p>
      </div>
      <div class="flex mt-3">
        <span class="flex-1 text-blue-400">校区：{{postDetail.campus}}</span>
        <span>约定时间：{{postDetail.appointedTime}}</span>
      </div>
      <div class=" mt-3">
        <span class="text-gray-500">约定校内地点：{{postDetail.inAddress}}</span>
      </div>
      <div class="text-xl mt-3">
        {{postDetail.content}}
      </div>
    </CardBody>
    <CardFooter [extra]="footerExtra">
      <ng-template #footerExtra>
        <span class="flex-1 pr-1 text-right">
         发帖时间：{{postDetail.createTime}}
        </span>
      </ng-template>
    </CardFooter>
  </Card>
</div>
